<!--首页每日推荐-->
<template>
	<view >
		<div id="vm" class="pubu" v-cloak>
			<!-- 左边的瀑布 -->
			<ul class="yg yg_l">
				<li v-for="(item,index) in recomendList" :key="index" v-if="index%2==0">
					<view class="" @tap="toDetail(item.goods_id,item.store_id)">
						<div>
							<image :src="item.goods_image_url" mode="scaleToFill"></image>
						</div>
						<p class="tit">{{ item.goods_name }}</p>
						<p class="subtit">{{ item.goods_advword }}</p>
					</view>

					<p class="price">
						<text class="price-l fw700 fs26">￥{{ item.goods_price }}</text>
						<template v-if="!isAdmin">
							<view class="pb-car iconfont" :id="item.goods_id" :data-img="item.goods_image_url" @tap="addShopCar"><image src="../../static/shopcar.png"></image></view>
						</template>
					</p>
				</li>
			</ul>
			<!-- 右边的瀑布 -->
			<ul class="yg yg_r">
				<li v-for="(item,index) in recomendList" :key="index" v-if="index%2==1">
					<view class="" @tap="toDetail(item.goods_id,item.store_id)">
						<div>
							<image :src="item.goods_image_url" mode="scaleToFill"></image>
						</div>
						<p class="tit">{{ item.goods_name }}</p>
						<p class="subtit">{{ item.goods_advword }}</p>
					</view>

					<p class="price">
						<text class="price-l fw700 fs26">￥{{ item.goods_price }}</text>
						<template v-if="!isAdmin">
							<view class="pb-car iconfont" :id="item.goods_id" :data-img="item.goods_image_url" @tap="addShopCar">
								<image src="../../static/shopcar.png"></image>
							</view>
						</template>
					</p>
				</li>
			</ul>
			<div style="clear: both;"></div>
		</div>
		 
	</view>
</template>


<!--JS-->
<script>
	//  加入购物车动画组件
	import shopCarAnimation from '@/components/add-shopcar-animation.vue'
	export default {
		data() {
			return {
				recomendList:[{
					goods_image_url:'../../static/grid1.png',
					goods_name:'2019春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女2019春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女',
					goods_advword:'2019春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女2019春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女',
					goods_id:1,
					goods_price:100
				},{
					goods_image_url:'../../static/grid2.png',
					goods_name:'2019春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女2019春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女',
					goods_advword:'2019尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女',
					goods_id:1,
					goods_price:100
				},
				{
					goods_image_url:'../../static/grid3.png',
					goods_name:'版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女',
					goods_advword:'2019春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女2019春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女',
					goods_id:1,
					goods_price:100
				},
				{
					goods_image_url:'../../static/grid1.png',
					goods_name:'2019春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女2019春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女',
					goods_advword:'春装新款韩版时尚针织衫女开衫宽松百搭留苏时尚厚毛衣外套女',
					goods_id:1,
					goods_price:100
				}]
			};
		},
		components:{
			shopCarAnimation
		},
		methods: {
			// 跳转到详情页
			toDetail(goods_id,store_id) {
				
			},
			// 加入购物车
			addShopCar(e) {
				// 成功的话，调用加入购物车动画
				this.$refs.carAnmation.touchOnGoods(e);
			}
		}
	};
</script>


<!--css样式-->
<style lang="scss" scoped>
	@import '../../common/css/pubu.css';
	.pb-car {
		float: right;
		color: #FD395B;
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
		text-align: center;
		margin-right: 8upx;
		image {
			width: 100%;
			height: 100%;
		}
	}

</style>
